import React, { useState } from 'react';

import './index.less';

const HouseSkeletons = () => {
  const [state, setState] = useState(Array(4).fill(1));

  return (
    <div className="house-skeletons">
      <div className="skeletons banner"></div>
      <div className="detail-info">
        <div className="info-item title skeletons"></div>
        <div className="info-item skeletons"></div>
        <div className="info-item price skeletons"></div>
        <div className="info-item time skeletons"></div>
        <div className="info-item time skeletons"></div>
        <div className="info-item time skeletons"></div>
        <div className="btn skeletons"></div>
      </div>
      <div className="comments">
        <div className="skeletons title"></div>
        {state.map((item, index) => (
          <div className="item" key={index}>
            <div className="skeletons left"></div>
            <div className="right">
              <div className="skeletons name"></div>
              <div className="skeletons context"></div>
              <div className="skeletons time"></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default HouseSkeletons;
